<template>
  <div class="lin_productlist">
    <div class="lin_productlist_list">
      <div v-if="Insta360ScrapyIndexImgData">
        <ul>
          <li>
            <div :style="{ 'background-image': 'url(' + getItemUrl(0) + ')' }">
              <a href="#">
                <img src="https://res.insta360.com/static/bfc1cf35a91e5cef37e845daea54c7b6/go3-en.svg">
              </a>
            </div>
          </li>
          <li>
            <div :style="{ 'background-image': 'url(' + getItemUrl(1) + ')' }">
              <a href="#">
                <img src="https://res.insta360.com/static/bfc1cf35a91e5cef37e845daea54c7b6/go3-en.svg">
              </a>
            </div>
          </li>
          <li>
            <div :style="{ 'background-image': 'url(' + getItemUrl(2) + ')' }">
              <a href="#">
                <img src="https://res.insta360.com/static/bfc1cf35a91e5cef37e845daea54c7b6/go3-en.svg">
              </a>
            </div>
          </li>
          <li>
            <div :style="{ 'background-image': 'url(' + getItemUrl(3) + ')' }">
              <a href="#">
                <img src="https://res.insta360.com/static/bfc1cf35a91e5cef37e845daea54c7b6/go3-en.svg">
              </a>
            </div>
          </li>
          <li>
            <div :style="{ 'background-image': 'url(' + getItemUrl(4) + ')' }">
              <a href="#">
                <img src="https://res.insta360.com/static/bfc1cf35a91e5cef37e845daea54c7b6/go3-en.svg">
              </a>
            </div>
          </li>
          <li>
            <div :style="{ 'background-image': 'url(' + getItemUrl(5) + ')' }">
              <a href="#">
                <img src="https://res.insta360.com/static/bfc1cf35a91e5cef37e845daea54c7b6/go3-en.svg">
              </a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="lin_productlist">
    <div class="lin_productlist_team">
      <a>
        <img src="https://res.insta360.com/static/3288c4e75c50d0e374cb36b4ef9cfbc3/EN.jpg">
      </a>
    </div>
  </div>
</template>


<script lang="ts">
import { Insta360ScrapyIndexImg} from '@/api/api'

  export default defineComponent({
  setup(){
    const data = reactive({
      Insta360ScrapyIndexImgData: ref()
    })


    Insta360ScrapyIndexImg('').then((res: any) => {
        data.Insta360ScrapyIndexImgData = res._rawValue.title
      }).catch((err: any) => {
        console.log(err, '请求失败')
      })

      const getItemUrl = (index: any) => {
        // 根据索引获取指定项的 url
        return data.Insta360ScrapyIndexImgData[index].url;
      }

    return{
      ...toRefs(data),
      getItemUrl
    }
  }
  })





</script>



<style scoped>
.lin_productlist {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lin_productlist_list ul{
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 2fr);
  grid-template-rows: auto;
  gap: 40px;
  margin-right: 38px;
  transition: all .3s ease;
}

.lin_productlist_list ul li{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 520px;
  height: 284px;
}


.lin_productlist_list ul li div {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 15px;

}

.lin_productlist_list ul li div:hover {
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果，可以根据需要进行调整 */
}


.lin_productlist_list ul li div img {
  display: flex;
  left: 50px;
  top: 101px;
  align-items: center;
}

.lin_productlist_team:hover {
  cursor: pointer;
}

.lin_productlist_team img{
  background: #f8f9fc;
  width: 1080px;
  height: 284px;
}

</style>